<style lang="less" scoped>
@import "./account.less";
</style>
<template>
    <Card style="width:80%;margin:0 auto">
        <p slot="title">
            <Icon type="ios-film-outline"></Icon>
            对公账号
        </p>
        <Row>
            <Col :span="23" :push="1" style="border-bottom:1px solid #000  ;margin:20px 0 20px 0">
                <p>支付宝转账方式</p>
            </Col>
        </Row>
        <Form :model="zhifubao" :label-width="120">
            <FormItem label="支付宝账户" prop="account">
                <Input v-model="zhifubao.account" placeholder=""></Input>
            </FormItem>
            <FormItem label="真实名" prop="name">
                <Input v-model="zhifubao.name" placeholder=""></Input>
            </FormItem>
        </Form>

        <Row>
            <Col :span="23" :push="1" style="border-bottom:1px solid #000  ;margin:20px 0 20px 0">
                <p>银行卡方式1</p>
            </Col>
        </Row>
        <Form :model="bank1" :label-width="120">
            <FormItem label="转账方式标题" prop="name">
                <Input v-model="bank1.title" placeholder=""></Input>
            </FormItem>
            <FormItem label="收款卡号" prop="name">
                <Input v-model="bank1.account" placeholder=""></Input>
            </FormItem>
            <FormItem label="收款人" prop="name">
                <Input v-model="bank1.name" placeholder=""></Input>
            </FormItem>
            <FormItem label="开户银行" prop="name">
                <Input v-model="bank1.bank" placeholder=""></Input>
            </FormItem>
        </Form>

        <Row>
            <Col :span="23" :push="1" style="border-bottom:1px solid #000  ;margin:20px 0 20px 0">
                <p>银行卡方式2</p>
            </Col>
        </Row>
        <Form :model="bank2" :label-width="120">
            <FormItem label="转账方式标题" prop="name">
                <Input v-model="bank2.title" placeholder=""></Input>
            </FormItem>
            <FormItem label="收款卡号" prop="name">
                <Input v-model="bank2.account" placeholder=""></Input>
            </FormItem>
            <FormItem label="收款人" prop="name">
                <Input v-model="bank2.name" placeholder=""></Input>
            </FormItem>
            <FormItem label="开户银行" prop="name">
                <Input v-model="bank2.bank" placeholder=""></Input>
            </FormItem>
        </Form>
        <Row>
            <Col :span="2" :push="20">
                <Button type="primaary" @click="submit">保存账号</Button>
            </Col>
        </Row>
    </Card>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      zhifubao: {},
      bank1: {},
      bank2: {}
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      axios.get("account").then(response => {
        if (response.data.code === 200) {
          this.zhifubao = response.data.data.zhifubao;
          this.bank1 = response.data.data.bank1;
          this.bank2 = response.data.data.bank2;
        } else {
          if (response.data.code === 403) {
            this.$store.commit("logout", this);
            this.$router.push({
              name: "login"
            });
          } else {
            this.$Message.error(response.data.msg);
          }
        }
      });
    },
    submit() {
      axios
        .post("account", {
          accounts: {
            zhifubao: this.zhifubao,
            bank1: this.bank1,
            bank2: this.bank2
          }
        })
        .then(response => {
          if (response.data.code === 200) {
            this.$Message.success("保存成功");
          } else {
            if (response.data.code === 403) {
              this.$store.commit("logout", this);
              this.$router.push({
                name: "login"
              });
            } else {
              this.$Message.error(response.data.msg);
            }
          }
        });
    }
  }
};
</script>
